import {Navigate, NavLink, Route, Routes} from "react-router-dom";
import One from "../component/one";
import AntdProject from "../component/antdProject";

function App() {
    return (
        // 指定路由模式
        // Router 路由模式 Routes 路由器 Route 路由  从大到小
        <>
            {/*<h3>正在学习路由</h3>*/}
            {/*<br/>*/}
            {/*<nav>*/}
            {/*    <NavLink to={"/one"}>跳转到one页面</NavLink>*/}
            {/*</nav>*/}
            <Routes>
                {/*path: 路由地址   element 地址里的内容  path地址带* 这是重定向页面*/}
                <Route path={"*"} element={<h3>页面不存在</h3>}></Route>
                {/*<Route path={"/"} element={<h3>这是首页</h3>}></Route>*/}
                {/*导航链接  nav > NavLink*/}
                <Route path={"/"} element={<div>
                    <h3>正在学习路由</h3>
                    <NavLink to={"/one"}>跳转到one页面</NavLink>
                    <br/>
                    <NavLink to={"/antd"}>跳转到antd页面</NavLink>
                </div>}></Route>
                <Route path={"/cart"} element={<h3>购物车</h3>}>
                    <Route path={"/cart/recommend"}>购物车推荐</Route>
                </Route>
                {/*如果地址是redirect，会直接重定向到首页*/}
                <Route path={"/redirect"} element={<Navigate to={"/"}></Navigate>}></Route>
                {/*路由中嵌套组件*/}
                <Route path={"/one"} element={<One></One>}></Route>
                <Route path={"/antd"} element={<AntdProject></AntdProject>}></Route>
            </Routes>
        </>
    )
}

export default App;
